<template>
	<!-- 审核合同签约-->
	<div class="optimization">
		<!-- 头部 -->
		<div class="optimizationTop">
			<div class="optimization_logo">
				<img src="../../static/image/16557845140690910146.png" alt="">
			</div>
			<div class="optimization_title">
				<div class="title_left">审核合同签约</div>
				<div class="title_right">
					<div class="title_right-left" @click="infodiv">
						<div> <el-avatar size="small" :src="address"></el-avatar></div>
						<div>{{username}}</div>
					</div>
					<div class="line"></div>
					<div class="loout" @click="lyout">退出</div>
				</div>
			</div>
			<div class="active">
				<img src="../../static/image/16557845125699707747.png" alt="">
			</div>
		</div>
		<!-- 左侧导航栏 -->
		<div class="left">
			<ul>
				<li @click="sheji()">设计优化</li>
				<li class="activeLi">审核/合同签约</li>
				<li @click="shenheziliao()">结算审核资料</li>
				<li @click="mybaogao()">我的报告</li>
			</ul>

		</div>
		<ul class="leftIcon">

			<li class="activeIconLi">
				<img src="../../static/image/16557845125746053644.png" alt="">
			</li>
		</ul>
		<!-- 内容部分 -->
		<div class="content">
			<div class="con_information">
				<!-- 订单信息 -->
				<div class="con_information_top">
					<span>
						<img src="../../static/image/16557845125786128394.png" alt="">
					</span>
					<span>订单信息</span>
				</div>
				<!-- -->
				<div  v-if="infodata ==''">
					<el-empty description="无数据" :image-size="50"></el-empty>
				</div>
				<!--  -->
				<div class="con_information_text" v-else-if="infodata !=''">
					<ul >
						<li>订单号：{{infodata.ordersNumber}}</li>
						<li>类型：{{infodata.contractExamineType}}</li>
						<li>下单时间：{{infodata.payableMoney}}</li>
						<li>下单金额：<span style="color: rgb(254, 100, 26);">￥{{infodata.payableMoney}}.00</span></li>
						<li>备注：{{infodata.remarks}}</li>
					</ul>
				</div>
			</div>
			<div class="con_Feedback">
				<!-- 资料审核意见反馈 -->
				<div class="con_information_top">
					<span>
						<img src="../../static/image/16557845125786128394.png" alt="">
					</span>
					<span>资料审核意见反馈</span>
				</div>
				<div v-if="this.list ==''">
					<el-empty description="无数据" :image-size="50"></el-empty>
				</div>
				<div class="Feedback_list" v-else>
					<div class="" v-for="(item,i) in list" :key="i">
						<span>{{item.opinionRemarks}}</span>
					</div>
				</div>
			</div>
			<div class="con_desc">
				<div class="desc_drawing">
					<div class="drawing_title">
						<div class="con_information_top">
							<span>
								<img src="../../static/image/16557845125786128394.png" alt="">
							</span>
							<span>合同、预算清单</span>
						</div>
						<div style="display:flex">
							<div class="drawing_btn">
							<div @click="addUser('htysqd')">参考模版</div>
							<!-- <div>+ 上传文件</div> -->
						</div>
						<el-upload class="upload-demo" ref="upload" :action="this.$api+'/app3/upload/uploadOneWithName'"
						 multiple :on-change="success" :auto-upload="false" :show-file-list="false" :on-success="handleSU"
						:limit="3" :on-exceed="handleExceed"  :file-list="fileList" >
						<div>点击上传</div>
					</el-upload>
						</div>
						
					</div>
					
					<div class="drawing_Table">
						
						<el-table :data="tableDataHT" stripe style="width: 100%">
							<el-table-column prop="sourceFileName" label="文件名称" width="330">
							</el-table-column>
							<el-table-column prop="sourceFileTime" label="上传时间" width="250">
							</el-table-column>
							<el-table-column label="操作" width="120">
								<template slot-scope="scope">
									<el-button @click.native.prevent="deleteRow(scope.$index, tableDataHT)" type="text"
										size="small">
										移除
									</el-button>
								</template>
							</el-table-column>
						</el-table>
					</div>
				</div>
				<div class="desc_demand">
					<!-- 需求说明 -->
					<div class="drawing_title">
						<div class="con_information_top">
							<span>
								<img src="../../static/image/16557845125786128394.png" alt="">
							</span>
							<span>施工图</span>
						</div>
						<div style="display:flex">
							<div class="drawing_btn">
							<div @click="addUser('htsgt')">参考模版</div>
							<!-- <div>+ 上传文件</div> -->
						</div>
						<el-upload class="upload-demo" ref="upload2" :action="this.$api+'/app3/upload/uploadOneWithName'"
						 multiple :on-change="success2" :auto-upload="false" :show-file-list="false" :on-success="handleSU2"
						:limit="3" :on-exceed="handleExceed"  :file-list="fileListSG" >
						<div>点击上传</div>
					</el-upload>
						</div>
						
					</div>
					
					<div class="drawing_Table">
						
						<el-table :data="tableData" stripe style="width: 100%">
							<el-table-column prop="constructionUrl" label="文件名称" >
							</el-table-column>
							<el-table-column label="操作" width="120">
								<template slot-scope="scope">
									<el-button @click.native.prevent="deleteRow2(scope.$index, tableData)" type="text"
										size="small">
										移除
									</el-button>
								</template>
							</el-table-column>
						</el-table>
						<div class="text_84">注：您可上传.doc ,.pdf,rp,等,且不超过100kb</div>
					</div>
				</div>
			</div>
			<div class="con_btn">
				<!-- 按钮 -->
				<div class="cencel" @click="cancel">取消</div>
				<div class="submit" @click="sure">确认</div>
			</div>
		</div>
		<el-dialog title="参考模版" :visible.sync="dialogTableVisible2" center :append-to-body='true'
			:lock-scroll="false" width="50%">
		
			<div v-html="content">
			
			</div>
			
		</el-dialog>
		<el-dialog title="" :visible.sync="dialogTableVisible" center :append-to-body='true' :lock-scroll="false"
			width="40%">
			<div class="info">
				<div class="infopic">
					<img :src="this.address" alt="">
				</div>
				<div class="name" style="margin-top: 10px;color: #333;">{{this.username}}</div>
				<div class="name" style="color: #999;">2021-03-24 09:25:30</div>
			</div>
			<div class="img_6">
				<div @click="ZHinfo">
					<el-dropdown-item style="color: #1C62F9;">账号信息</el-dropdown-item>
				</div>
				<div @click="switchome">
					<el-dropdown-item style="color: #fff;">切换房屋</el-dropdown-item>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		name: 'optimization',
		data() {
			return {
				content:'',
				tableDataHT:[],
				tableData: [],
				infodata: [],
				fileList: [],
				fileListSG:[],
				username:'',
				list:'',
				dialogTableVisible: false,
				dialogTableVisible2:false,
				newfileList2:[],
				newfileList:[]
			}
		},
		beforeCreate() {
			document.querySelector('body').setAttribute('style', 'background-color:#f6f7f9')
		},
		beforeDestroy() {
			document.querySelector('body').removeAttribute('style')
		},
		created() {
			this.getdata();
			this.address=localStorage.getItem('address');
			this.username=localStorage.getItem('name');
		},
		methods: {
			cancel()
		{
			this.getdata();
			this.$message({
						type: 'success',
						message: '取消成功'
					});
		},
			addUser(flag) {
				this.$axios({
					method: 'get',
					url: this.$api+'/app1/article/identification?identification='+flag,
					headers: {
						token: localStorage.getItem('token')
					}
				}).then(r=>{
					
					if(r.data.code==200)
					{
                        this.content=r.data.data.articleContent;
						this.dialogTableVisible2 = true;
					}
					
				})
				 //默认页面不显示为false,点击按钮将这个属性变成true
			},
			handleSU2(res){
				this.tableData.push({
					constructionId:'',
					contractExamineId:'',
					constructionUrl:res.data.path,
					name:res.data.name

				})
				
			},
			handleSU(res){
				let date=new Date();
				this.tableDataHT.push({
					sourceFileId:'',
					contractExamineId:'',
					name:res.data.name,
					sourceFileName:res.data.name,
					sourceFileTime:date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate(),
					sourceFileUrl:res.data.path
				})
				console.log(this.tableDataHT);
			},
			// 成功
			success(file, fileList){
				this.$refs.upload.submit();
				
			
			},
			success2(file, fileList){
				this.$refs.upload2.submit();
				this.$message({
				  type: 'success',
				  message: '上传成功'
				});
				
			},
			// 删除合同
			deleteRow(index,table){
				console.log(this.tableDataHT,'tableDataHT')
				// if(this.tableDataHT[index].sourceFileId)
				// {
				// 	this.$axios({
				// 	method: 'get',
				// 	url: this.$api+'/app1/examine/deleteSourceFile?sourceFileId='+this.tableDataHT[index].sourceFileId,
				// 	data:{
						
				// 	},
				// 	headers: {
				// 		token: localStorage.getItem('token')
				// 	}
				// }).then(res => {
				// 	if (res.data.code == 200) {
				// 		this.$message({
				// 		  type: 'success',
				// 		  message: '删除成功'
				// 		});
						
				// 	} else {
				// 		 this.$message({
				// 		  type: 'info',
				// 		  message: res.data.msg
				// 		});
				// 	}
				// })
				// }
				this.tableDataHT.splice(index,1);
				
			},
			deleteRow2(index,table){
				// 施工图删除
				console.log(this.tableData[index],'table');
				// if(this.tableData[index].constructionId)
				// {
				// 	this.$axios({
				// 	method: 'get',
				// 	url: this.$api + '/app1/examine/deleteConstruction?constructionId='+this.tableData[index].constructionId,
				// 	data: {
				// 	},
				// 	headers: {
				// 		token: localStorage.getItem('token')
				// 	}
				// }).then(res => {
				// 	if (res.data.code == 200) {
				// 		this.$message({
				// 		  type: 'success',
				// 		  message: '删除成功'
				// 		});
					
				// 	} else {
				// 		this.$message({
				// 			type: 'info',
				// 			message: res.data.msg
				// 		});
				// 	}
				// })
				// }
				this.tableData.splice(index,1);	
				
			},
			// 确定
			sure(){
				// console.log(this.fileList)
				// 合同  入库
				let sourceFilesDto={
					sourceFiles:this.tableDataHT
				}
				this.$axios({
					method: 'post',
					url: this.$api+'/app1/examine/updateSourceFile',
					data:sourceFilesDto,
					headers: {
						token: localStorage.getItem('token')
					}
				}).then(res => {
					if (res.data.code == 200) {
						this.$message({
						  type: 'success',
						  message: '上传成功'
						});
				
					} else {
						 this.$message({
						  type: 'info',
						  message: res.data.msg
						});
					}
				})
				// 施工图  入库
				let constructionDto={
					constructions:this.tableData
				}	
				this.$axios({
					method: 'post',
					url: this.$api+'/app1/examine/updateConstruction',
					data:constructionDto ,
					headers: {
						token: localStorage.getItem('token')
					}
				}).then(res => {
					if (res.data.code == 200) {
						this.$message({
						  type: 'success',
						  message: '删除成功'
						});
					
					} else {
						 this.$message({
						  type: 'info',
						  message: res.data.msg
						});
					}
				})
			},
			
			
			handleExceed(files, fileList) {
				this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
			},
			// 显示信息
			getdata() {
				// 订单信息
				this.$axios({
					method: 'get',
					url: this.$api+'/app1/examine/information',
					data: {},
					headers: {
						token: localStorage.getItem('token')
					}
				}).then(res => {
					if (res.data.code == 200) {
						console.log(res.data.data,'infodata')
						this.infodata = res.data.data;
						
						
					} else {
						 this.$message({
						  type: 'info',
						  message: res.data.msg
						});
					}
				})
				// 资料意见反馈
				this.$axios({
					method: 'get',
					url: this.$api+'/app1/examine/opinionInformation',
					data: {},
					headers: {
						token: localStorage.getItem('token')
					}
				}).then(res => {
					if (res.data.code == 200) {
						// console.log(res.data)
						this.list = res.data.data;
					} else {
						 this.$message({
						  type: 'info',
						  message: res.data.msg
						});
					}
				})
				// 合同预算清单
				this.$axios({
					method: 'get',
					url: this.$api+'/app1/examine/sourceFile',
					data: {},
					headers: {
						token: localStorage.getItem('token')
					}
				}).then(res => {
					if (res.data.code == 200) {
						// console.log(res.data,'合同')
						this.tableDataHT = res.data.data.length>0?res.data.data:[];
					} else {
						 this.$message({
						  type: 'info',
						  message: res.data.msg
						});
					}
				})
				// 施工图
				this.$axios({
					method: 'get',
					url: this.$api+'/app1/examine/construction',
					data: {},
					headers: {
						token: localStorage.getItem('token')
					}
				}).then(res => {
					if (res.data.code == 200) {
						// console.log(res.data)
						this.tableData = res.data.data;
					} else {
						 this.$message({
						  type: 'info',
						  message: res.msg
						});
					}
				})
			},
			lyout(){
				this.$axios({
					method: 'post',
					url: this.$api+'/app3/consumer/quit',
					data: {},
					headers:{
						token:localStorage.getItem('token')
					}
				}).then(res=>{
					if(res.data.code==200){
						console.log(res.data)
						 this.$message({
						  type: 'success',
						  message: '退出成功！'
						});
						var storage = window.localStorage;
						storage.clear();
						this.$router.push('/')				
					}else{
						var storage = window.localStorage;
						storage.clear();
						this.$router.push('/')
						//  this.$message({
						//   type: 'info',
						//   message: res.msg
						// });
					}
					
					console.log(res)
				})
				},
			shenheziliao() {
				this.$router.push('/settlement')
			},
			mybaogao() {
				this.$router.push('/report')
			},
			sheji() {
				this.$router.push('/optimization')
			},
			switchome(){
				 this.$router.push({
					path: '/switchome'
				}) 
				this.dialogTableVisible = false;
			},
			ZHinfo(){
				this.$router.push({
				    path: '/ZHinfo'
				}) // 带
				this.dialogTableVisible = false;
			},
			infodiv(){
				this.dialogTableVisible = true;
			},
		}
	}
</script>


<style scoped>
	.info {
		
	}
	.upload-demo{
	width: 88px;
height: 32px;
line-height: 32px;
text-align: center;
font-size: 13px;
background: #1C62F9;
opacity: 1;
color:#ffffff;
border-radius: 4px;
}
	.info .name{
		text-align: center;
		line-height: 30px;
		font-size: 14px;
	}
	.infopic{
		width: 30%;
		margin:0 auto;
	}
	.infopic img{
		width: 100px;
		height: 100px;
		border-radius: 50%;
		margin-left: 30%;
		z-index: -1;
	}
	.infopic div{
		background-color: #1C62F9;
		border-radius: 18px;
		width: 80px;
		height: 20px;
		color: #fff;
		text-align: center;
		position: absolute;
		top: 43%;
		left: 43%; 
	}
	.img_6 {
		display: flex;
		justify-content: space-around;
		border-top: 1px solid #eee;
		padding-top: 20px;
	}
	
	.img_6 div {
		width: 30%;
	
	}
	.img_6 div:first-child{
		border: 1px solid #1C62F9;
		border-radius: 18px;
		
		text-align: center;
	}
	.img_6 div:last-child{
		background-color:#1C62F9 ;
		border-radius: 18px;
		color: #fff;
		text-align: center;
	}
	.text_info {
		width: 100px;
		height: 80px;
	}
	ul li {
		list-style: none;
		color: #fff;
		padding: 0;
		margin: 0;
	}

	.optimizationTop {
		width: 100%;
		height: 36px;
		background-color: rgba(29, 106, 255, 1);
		position: absolute;
		left: 0;
		top: 0;
		z-index: 10;
		display: flex;

	}

	.el-button--text {
		color: #333 !important;
	}

	.optimization_logo {
		width: 55px;
		height: 20px;
		margin-top: 6px;
		margin-left: 30px;
	}

	.optimization_logo img {
		width: 100%;
		height: 100%;
	}

	.optimization_title {
		width: 89%;
		color: #fff;
		margin-left: 2.8%;
		display: flex;
		line-height: 36px;
		justify-content: space-between;
	}

	.title_left {
		width: 20%;
		font-size: 14px;
		text-align: center;
	}

	.title_right-left {
		display: flex;
		font-size: 14px;
		/* width: 60px; */
		justify-content: space-between;
	}

	.el-avatar--small{
		  margin-top: 10%;
		  margin-right: 5px;
	}

	.title_right {
		display: flex;
		font-size: 14px;
	}

	.line {
		width: 1px;
		height: 10px;
		background-color: #fff;
		margin-top: 13px;
		margin-left: 20px;
	}

	.loout {
		width: 70px;
		text-align: center;
	}

	.active {
		position: absolute;
		top: 21px;
		left: 15%;
		width: 50px;
		height: 3px;
	}

	.active img {
		width: 100%;
		height: 100%;
	}

	/*  */
	.left {
		position: absolute;
		left: 0;
		top: 0;
		width: 120px;
		height: 100%;
		background-color: rgb(0, 14, 38);
		z-index: 9;
	}

	.left ul {
		margin-top: 55px;
		padding-left: 0;
		text-align: center;
	}

	.left ul li {
		text-align: center;
		font-size: 14px;
		height: 40px;
		line-height: 40px;
	}

	.activeLi {
		background-color: rgb(7, 36, 90);
	}

	.leftIcon {
		position: absolute;
		top: 9.5%;
		left: -39px;
	}

	.activeIconLi {
		width: 5px;
		height: 20px;
	}

	.activeIconLi img {
		width: 100%;
		height: 100%;
	}

	/*  */
	.content {
		width: 90%;
		height: 85%;
		position: absolute;
		top: 7%;
		left: 8%;
	}

	.con_information {
		background-color: #fff;
		width: 99%;
		padding: 10px;
		border-radius: 8px;
	}

	.con_information_top {
		font-size: 18px;
		margin-top: 10px;
	}

	.con_information_top span:first-child {
		width: 20px;
		height: 20px;
	}

	.con_information_top img {
		width: 18px;
		height: 10px;
	}

	.con_information_text {
		margin-top: 15px;
		padding: 20px 0;
		
	}

	.con_information_text ul {
		display: flex;
		padding-left: 12px;
	}

	.con_information_text ul li {
		list-style: none;
		width: 30%;
		color: #333;
		font-size: 15px;
	}

	.con_Feedback {
		padding: 10px;
		margin-top: 20px;
		background-color: #fff;
		border-radius: 8px;
	}

	.Feedback_list {
		width: 97%;
		margin: 0 auto;
		border: 1px solid rgb(29, 1.6, 255);
		border-radius: 8px;
		margin-top: 20px;
		background-color: rgb(244, 247, 255);
		font-size: 12px;
		padding: 0 10px;
	}

	.Feedback_list div {
		height: 40px;
		line-height: 40px;
	}

	.Feedback_list div {
		border-bottom: 1px solid #1d6aff1f;
	}

	.Feedback_list span {
		color: rgb(29, 106, 255);
	}

	.con_desc {
		display: flex;
		justify-content: space-between;
		margin-top: 15px;
	}

	.desc_drawing {
		width: 48%;
		background-color: #fff;
		padding: 0 10px;
	}

	.drawing_title {
		width: 100%;
		display: flex;
		justify-content: space-between;
	}

	.desc_demand {
		width: 48%;
		background-color: #fff;
		padding: 0 10px;
	}

	.drawing_btn {
		display: flex;
	   margin-right: 20px;
		padding: 0 10px;
	height: 30px;
	border: 1px solid #eee;
	font-size: 14px;
	text-align: center;
	line-height: 30px;
	border-radius: 4px;
	}

	

	

	.drawing_Table {
		width: 90%;
		margin: 20px auto;
	}

	.text_84 {
		color: #ff371d;
		font-size: 0.75rem;
		font-family: '.AppleSystemUIFont';
		height: 40px;
		line-height: 40px;
	}

	.con_btn {
		display: flex;
		justify-content: space-between;
		width: 40%;
		margin: 0 auto;
		margin-top: 50px;
		font-size: 1rem;
	}

	.cencel {
		width: 250px;
		height: 40px;
		line-height: 40px;
		text-align: center;
		border-radius: 38px;
		border: 1px solid #eee;
		background-color: #fff;
	}

	.submit {
		width: 250px;
		height: 40px;
		line-height: 40px;
		text-align: center;
		border-radius: 38px;
		background-color: #1d6aff;
		color: #fff;
	}
</style>
